<template>
    <view class="tabbar" :class="{'border': paddingTop}">
        <view
            class="tab"
            v-for="(item,index) in tab"
            :key="index"
            @click="change(index)"
            :class="[active == index && !showLabel ? 'change': '', {'paddingTop': paddingTop}]"
        >
            <view class="single" v-if="!showLabel">{{ item.label }}</view>
            <view
                class="double"
                v-if="showLabel"
                :class="[active == index && showLabel ? 'change_color' : '']"
            >
                <p>{{ item.label }}</p>
                <span>{{ item.value }}</span>
            </view>
        </view>
    </view>
</template>
<script>
export default {
    props: {
        tab: {
            type: Array,
            default: [],
        },
		showLabel: {
			type: Boolean,
			default: true
		},
		active: {
			type: Number,
			default: 0
		},
		paddingTop: {
			type: Boolean,
			default: false
		}
    },
    components: {},
    data() {
        return {
            // active: 0,
        };
    },
    computed: {},
    methods: {
        change(index) {
            this.$emit("change_status", index);
        },
    },
    beforeCreate() {},
    created() {},
    beforeMount() {},
    mounted() {
        
    },
    beforeUpdate() {},
    updated() {},
    beforeDestroy() {},
    destroyed() {},
};
</script>
<style scoped lang='scss'>
@import "./index.scss";
.paddingTop {
	padding-top: 20rpx;
	
}
.border {
	padding-bottom: 16rpx;
	border-bottom: 1px solid #ddd;
	margin: 0 24rpx;
}
</style>